import React from 'react';
import ReactDOM from 'react-dom';
import Router, {Route} from 'react-router';
import {createStore, applyMiddleware} from 'redux';
import {Provider} from 'react-redux';
import {createHashHistory, useBasename} from 'history'
import reducer from './reducer';
import {setClientId, setState, setConnectionState} from './action_creators';
import loggerMiddleware from './logger_middleware';
import remoteActionMiddleware from './remote_action_middleware';
import ArchiveApp from './components/ArchiveApp';
import {ArchiveListContainer} from './components/ArchiveList';
import SearchView from './components/SearchView';
import FillView from './components/FillView';


const createStoreWithMiddleware = applyMiddleware(
    remoteActionMiddleware, loggerMiddleware
)(createStore);
const store = createStoreWithMiddleware(reducer);

const routes = [{
        path: '/',
        component: ArchiveApp,
        indexRoute: {
            component: ArchiveListContainer          
        },
        childRoutes: [{
            path: 'archive',
            component: ArchiveListContainer
        }, {
            path: 'search',
            component: SearchView,           
        }, {
            path: 'fill',
            component: FillView,
        }]
    }]   

const history = useBasename(createHashHistory)({
   basename: ''
});

$(function(){
    ReactDOM.render(
        <Provider store={store}>
            <Router routes={routes} history={history}/>
        </Provider>, document.getElementById("main-box"));   
})

